/* src/App.css */

/* 定义应用内容容器的样式 */
/* width: 100%; 使容器宽度占满父元素宽度 */
/* height: 100vh; 设置容器高度为视口高度，即整个浏览器窗口的高度 */
/* display: flex; 将容器设置为弹性布局，方便子元素的排列 */
/* flex-direction: column; 子元素垂直排列 */
/* align-items: center; 子元素在交叉轴（水平方向）上居中对齐 */
/* justify-content: center; 子元素在主轴（垂直方向）上居中对齐 */
/* box-sizing: border-box; 使元素的内边距和边框包含在宽度和高度内 */
/* padding: 20px; 给容器内部添加20px的内边距 */
.app-content {
  width: 100%;
  height: 100vh; /* 视口高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
}

/* 定义包含多个章节的容器样式 */
/* width: 100%; 使容器宽度占满父元素宽度 */
/* max-width: 800px; 设置容器的最大宽度为800px，避免在大屏幕上过于宽大 */
/* text-align: center; 容器内文本水平居中对齐 */
.sections {
  width: 100%;
  max-width: 800px; /* 最大宽度 */
  text-align: center;
}

/* 定义章节容器内一级标题（h1）的样式 */
/* font-size: 2rem; 设置标题字体大小为2倍根元素字体大小 */
/* margin-bottom: 20px; 标题下方添加20px的外边距 */
.sections h1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

/* 定义章节容器内每个章节（section）的样式 */
/* margin-bottom: 20px; 每个章节下方添加20px的外边距 */
.sections section {
  margin-bottom: 20px;
}

/* 定义章节容器内二级标题（h2）的样式 */
/* font-size: 1.5rem; 设置标题字体大小为1.5倍根元素字体大小 */
/* margin-bottom: 10px; 标题下方添加10px的外边距 */
.sections h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

/* 响应式调整：当屏幕宽度小于等于768px时应用以下样式 */
@media (max-width: 768px) {
  /* 调整一级标题（h1）的字体大小为1.5倍根元素字体大小，以适应小屏幕 */
  .sections h1 {
    font-size: 1.5rem;
  }

  /* 调整二级标题（h2）的字体大小为1.2倍根元素字体大小，以适应小屏幕 */
  .sections h2 {
    font-size: 1.2rem;
  }
}